<template>
  <div class="company-profile teacher-form-container">
    <!-- 头部区域 -->
    <header class="header">
      <div class="header-title"><p>{{personalSignature}}</p></div>
      <div class="header-logo">
        <img class="logo" :src="logoUrl" alt="公司Logo" />
        <h1>{{deptName}}</h1>
      </div>
      <div class="icon">
        <button type="button" title="编辑" v-if="is_certified == '2'" @click="handleUpdate"></button>
        <button type="button" title="认证" v-if="is_certified == '0' || is_certified == '3'" @click="handleUpdate"></button>
        <button type="button" title="查看" v-if="is_certified == '1'" @click="handleUpdate"></button>
      </div>
    </header>

    <!-- 公司简介 -->
    <section class="section company-intro">
      <div class="title-container">
        <h2 class="title">公司简介</h2>
        <button class="more-options">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </button>
      </div>
      <p>{{companyProfile}}</p>
    </section>

    <!-- 产品介绍 -->
    <section class="section product-intro">
      <div class="title-container">
        <h2 class="title">产品介绍</h2>
        <button class="more-options">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </button>
      </div>
      <p>{{productDetail}}</p>
    </section>

    <!-- 资质荣誉 -->
    <section class="section qualifications">
      <div class="title-container">
        <h2 class="title">资质荣誉</h2>
        <button class="more-options">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </button>
      </div>
      <div class="carousel-wrapper">
        <div class="carousel-track" :style="{ transform: 'translateX(' + currentOffset + '%)' }">
          <div class="qualification-item" v-for="(item, index) in qualifications" :key="index">
            <div>
              <img :src="item.url" />
            </div>
<!--            <p>{{ item.description }}</p>-->
          </div>
        </div>
        <button class="carousel-btn prev" @click="prev"><img src="../../../images/js_prev.png"></button>
        <button class="carousel-btn next" @click="next"><img src="../../../images/js_next.png"></button>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="section contact-us">
      <div class="title-container">
        <h2 class="title">联系我们</h2>
        <button class="more-options">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </button>
      </div>
      <ul>
        <li>
          <div><span>法人代表：</span>{{legalPerson}}</div>
          <div><span>联系人：</span>{{contacts}}</div>
        </li>
        <li>
          <div><span>统一社会信用代码：</span>{{creditCode}}</div>
          <div><span>联系电话：</span>{{phone}}</div>
        </li>
        <li>
          <div><span>注册资金：</span>{{registeredFund}}(万元)</div>
          <div><span>企业地址：</span>{{address}}</div>
        </li>
        <li>
          <div><span>成立时间：</span>{{foundTime}}</div>
        </li>
      </ul>
    </section>
    <el-dialog
      :title="deptLitle"
      :visible.sync="openAdmin"
      width="900"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rulesAdmin" label-width="80px">
        <el-row>
          <el-col :span="12" style="height: 55px">
            <el-form-item label="企业名称" prop="deptName" label-width="120px">
              <el-input
                v-model="form.deptName"
                placeholder="请输入企业名称"
                :disabled="disabledOne"
                :maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 55px">
            <el-form-item label="企业性质" prop="nature" label-width="120px">
              <el-select
                style="width: 243px"
                v-model="form.nature"
                placeholder="请选择企业性质"
                :disabled="disabledTwo"
              >
                <el-option
                  v-for="dict in dict.type.enterprise_nature"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                  style="padding-left: 15px"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="height: 55px">
            <el-form-item label="所属行业" prop="industry" label-width="120px">
              <el-select
                v-model="form.industry"
                placeholder="请选择所属行业"
                style="width: 243px"
                :disabled="disabledTwo"
              >
                <el-option
                  v-if="$store.state.user.info.companyType == '0'"
                  v-for="dict in dict.type.customer_industry"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                  style="padding-left: 15px"
                ></el-option>
                <el-option
                  v-if="$store.state.user.info.companyType == '1'"
                  v-for="dict in dict.type.customer_industry_serve"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                  style="padding-left: 15px"
                ></el-option>
                <el-option
                  v-if="$store.state.user.info.companyType == '2'"
                  v-for="dict in dict.type.customer_industry_garden"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                  style="padding-left: 15px"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12" style="height: 55px">
            <el-form-item
              label="法人代表"
              prop="legalPerson"
              label-width="120px"
            >
              <el-input
                v-model="form.legalPerson"
                placeholder="请输入法人代表"
                :maxlength="20"
                :disabled="disabledTwo"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="height: 55px">
            <el-form-item
              label="注册资金"
              prop="registeredFund"
              label-width="120px"
            >
              <el-input
                style="width: 255rem"
                v-model="form.registeredFund"
                placeholder="请输注册资金"
                :maxlength="25"
                :disabled="disabledTwo"
                min="1"
              />&nbsp;(万元)
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 55px">
            <el-form-item label="成立时间" prop="foundTime" label-width="120px">
              <el-date-picker
                v-model="form.foundTime"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="pickerStartOptions"
                placeholder="选择日期"
                style="width: 243px"
                :disabled="disabledTwo"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="height: 55px">
            <el-form-item label="联系人" prop="contacts" label-width="120px">
              <el-input
                v-model="form.contacts"
                placeholder="请输入联系人"
                maxlength="20"
                :disabled="disabledTwo"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 55px">
            <el-form-item label="联系电话" prop="phone" label-width="120px">
              <el-input
                v-model="form.phone"
                placeholder="请输入联系电话"
                :disabled="disabledTwo"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="height: 55px">
          <el-col :span="12" style="height: 55px">
            <el-form-item
              label="统一社会信用代码"
              prop="creditCode"
              label-width="120px"
            >
              <el-input
                v-model="form.creditCode"
                placeholder="请输入统一社会信用代码"
                :disabled="disabledOne"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行政区域" prop="area" label-width="120px">
              <Treeselect
                v-model="form.area"
                :disabled="disabledTwo"
                :options="options"
                :flat="true"
                :show-count="true"
                :normalizer="normalizer"
                placeholder="请选择行政区域"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="height: 75px">
          <el-col :span="24" style="height: 55px">
            <el-form-item label="企业地址" prop="address" label-width="120px">
              <el-input
                v-model="form.address"
                type="textarea"
                placeholder="请输入企业地址"
                :disabled="disabledTwo"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="height: 75px">
          <el-col :span="24" style="height: 55px">
            <el-form-item
              label="个性签名"
              prop="personalSignature"
              label-width="120px"
            >
              <el-input
                v-model="form.personalSignature"
                type="textarea"
                placeholder="请输入个性签名"
                :disabled="disabledTwo"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="height: 75px">
          <el-col :span="24" style="height: 55px">
            <el-form-item
              label="经营范围"
              prop="businessScope"
              label-width="120px"
            >
              <el-input
                v-model="form.businessScope"
                type="textarea"
                placeholder="请输入经营范围"
                :disabled="disabledTwo"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="height: 75px">
          <el-col :span="24" style="height: 55px">
            <el-form-item
              label="企业介绍"
              prop="companyProfile"
              label-width="120px"
            >
              <el-input
                v-model="form.companyProfile"
                type="textarea"
                placeholder="请输入企业介绍"
                :disabled="disabledTwo"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="height: 75px">
          <el-col :span="24" style="height: 55px">
            <el-form-item
              label="产品介绍"
              prop="productDetail"
              label-width="120px"
            >
              <el-input
                v-model="form.productDetail"
                type="textarea"
                placeholder="请输入企业介绍"
                :disabled="disabledTwo"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="height: 75px">
            <el-form-item
              label="营业执照"
              class="is-required"
              label-width="120px"
            >
              <file-view
                :type="fileType1"
                :businessId="businessId"
                businessCode="business_license"
                :key="refreshKey"
              ></file-view>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="height: 75px">
            <el-form-item
              label="企业logo"
              label-width="120px"
              class="is-required"
            >
              <file-view
                :type="fileType"
                :businessId="businessId"
                :businessCode="businessCode"
                :key="refreshKey"
              ></file-view>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="height: 75px">
            <el-form-item label="公司图片" label-width="120px">
              <file-view
                :type="fileType1"
                :businessId="businessId"
                businessCode="enterprisePictrue"
                :key="refreshKey"
              ></file-view>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="is_certified == '2'" @click="submitForm"
        >保 存</el-button
        >
        <el-button
          type="primary"
          v-if="is_certified == '0'"
          @click="submitFormTwo"
        >保 存</el-button
        >
        <el-button
          type="primary"
          v-if="is_certified == '3'"
          @click="submitFormOne"
        >保 存</el-button
        >
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listDept,
  getDept,
  delDept,
  addDept,
  updateDept,
  listDeptExcludeChild,
} from "@/api/system/dept";
import { getPublicList } from "@/api/honor/management";
import { listData } from "@/api/system/dict/data";
import FileView from "@/components/FileView/index";
import { listManagementType } from "@/api/collaborative/management";
import pdf from "vue-pdf";
import { queryFile, fileRemove } from "@/api/system/file";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listArea } from "@/api/area/area";
export default {
  name: "Info",
  dicts: [
    "customer_industry_serve",
    "customer_industry_garden",
    "enterprise_nature",
    "customer_industry",
    "certificate_type",
    "other_type",
    "sys_org_type",
    "other_type",
  ],
  components: { FileView, pdf, Treeselect },
  data() {
    return {
      qualifications: [
        // { id: 1, image: require('@/assets/images/img_06.png'), description: '荣誉资质1'  },
        // { id: 2, description: '荣誉资质2' },
        // { id: 3, description: '荣誉资质3' },
        // { id: 4, description: '荣誉资质4' },
        // { id: 5, description: '荣誉资质5'  },
        // { id: 6, image: require('@/assets/images/img_06.png'),description: '荣誉资质6' },
        // { id: 7, description: '荣誉资质7' },
        // { id: 8, description: '荣誉资质8' }
      ],
      currentIndex: 0,
      intervalTime: 3000, // 自动播放间隔时间（毫秒）
      itemWidth: 21,      // 单个 item 占比（百分比），根据样式调整
      totalItems: 4,       // 总项数
      activeName: 'first',
      tempList: [],
      deptLitle: "",
      disabledOne: false,
      disabledTwo: false,
      is_certified: "",
      total: 0,
      showSearch: true,
      businessIdOther: null,
      index: null,
      openOther: false,
      openOtherAdd: false,
      formOther: {},
      queryOtherParams: {
        pageNum: 1,
        pageSize: 5,
        deptId: null,
        infoName: null,
        infoType: null,
        createId: null,
        createName: null,
        operateId: null,
        operateName: null,
        operateTime: null,
        belongTo: null,
      },
      queryParams: {
        deptId: null,
        infoName: null,
        infoType: null,
        createId: null,
        createName: null,
        operateId: null,
        operateName: null,
        operateTime: null,
        belongTo: null,
      },
      queryParamsType: {
        organizationId: null,
        companyType: null,
      },
      queryParamsHonor: {
        name: null,
        type: "",
        customerId: null,
        level: null,
        status: null,
        classificationId: null,
        organizationId: null,
        enterpriseName: null,
      },
      form: {},
      rulesAdmin: {
        legalPerson: [
          { required: true, message: "法人代表不能为空", trigger: "blur" },
        ],
        creditCode: [
          {
            required: true,
            message: "统一社会信用代码不能为空",
            trigger: "blur",
          },
          {
            max: 50,
            message: "统一社会信用代码长度不能超过100",
            trigger: "blur",
          },
        ],
        deptName: [
          { required: true, message: "企业名称不能为空", trigger: "blur" },
        ],
        phone: [
          { max: 20, message: "联系电话长度不能超过20", trigger: "blur" },
        ],
      },
      rulesOther: {
        infoName: [
          { required: true, message: "图片名称不能为空", trigger: "blur" },
        ],
        infoType: [
          { required: true, message: "图片类型不能为空", trigger: "change" },
        ],
      },
      openAdmin: false,
      businessId: null,
      businessCode: "enterprise_logo",
      fileType: 0,
      fileType1: 0,
      fileTypeOther: 0,
      refreshKey: 0,
      industryList: [],
      options: null,
      deptName: null,
      companyProfile: null,
      registeredFund: null,
      legalPerson: null,
      nature: null,
      creditCode: null,
      phone: null,
      foundTime: null,
      businessScope: null,
      contacts:null,
      industry: null,
      address: null,
      personalSignature: null,
      productDetail:null,
      pickerStartOptions: {
        disabledDate: time => {
          return time.getTime() > Date.now() - 8.64e7;
        },
      },
      disabled: false,
      logoUrl: null,
      deptotherinfoList: [],
      isShow: 0,
      isShow2: 0,
      isShow3: 0,
      pageTotal: null,
      dialogImageUrl: "",
      dialogImageUrlPdf: "",
      dialogVisible: false,
      dialogVisiblePdf: false,
      zmd1_xx: [],
      zmd2_xx: [],
      zmd3_xx: [],
    };
  },
  computed: {
    currentOffset() {
      return -this.currentIndex * this.itemWidth;
    }
  },
  mounted() {
    this.startAutoPlay();
    this.getDeptInfo();
    this.getPublicList();
    this.area();
  },
  methods: {
    getPublicList(){
      getPublicList().then(response =>{
       this.qualifications=response;
      })
    },
    area() {
      listArea({}).then(response => {
        this.options = response.data;
      });
    },
    getDeptInfo() {
      const deptId = this.$store.state.user.info.orgId;
      console.log("是否执行")
      getDept(deptId).then(response => {
        (this.deptName = response.data.deptName),
          (this.companyProfile = response.data.companyProfile);
        this.registeredFund = response.data.registeredFund;
        this.legalPerson = response.data.legalPerson;
        this.creditCode = response.data.creditCode;
        this.foundTime = response.data.foundTime;
        this.is_certified = response.data.isCertified;
        this.contacts=response.data.contacts;
        this.productDetail=response.data.productDetail;
        this.phone = response.data.phone;
        if (response.data.foundTime == null || response.data.foundTime == "") {
          this.foundTime = response.data.foundTime;
        } else {
          this.foundTime = response.data.foundTime.substring(0, 10);
        }
        this.businessScope = response.data.businessScope;
        this.address = response.data.address;
        this.personalSignature = response.data.personalSignature;
        if (response.data.industry == null || response.data.industry == "") {
          this.industry = "";
        } else {
          if (response.data.companyType == "0") {
            const paramsIndustry = {
              dictValue: response.data.industry,
              deptIds: [0],
              dictType: "customer_industry",
            };
            listData(paramsIndustry).then(response => {
              var industryList = response.rows;
              this.industry = industryList[0].dictLabel;
            });
          }
          if (response.data.companyType == "1") {
            const paramsIndustry = {
              dictValue: response.data.industry,
              deptIds: [0],
              dictType: "customer_industry_serve",
            };
            listData(paramsIndustry).then(response => {
              var industryList = response.rows;
              this.industry = industryList[0].dictLabel;
            });
          }
          if (response.data.companyType == "2") {
            const paramsIndustry = {
              dictValue: response.data.industry,
              deptIds: [0],
              dictType: "customer_industry_garden",
            };
            listData(paramsIndustry).then(response => {
              var industryList = response.rows;
              this.industry = industryList[0].dictLabel;
            });
          }
        }
        if (response.data.nature == null || response.data.nature == "") {
          this.nature = "";
        } else {
          const paramsNature = {
            dictValue: response.data.nature,
            deptIds: [0],
            dictType: "enterprise_nature",
          };
          listData(paramsNature).then(response => {
            var natureList = response.rows;
            this.nature = natureList[0].dictLabel;
          });
        }
        if (response.data.url == null || response.data.url == "") {
          this.logoUrl = require("../../../assets/images/logo.png");
        } else {
          this.logoUrl = response.data.url;
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          var businessId = this.$store.state.user.info.orgId;
          var businessCode = "enterprise_logo";
          var businessCode1 = "enterprisePictrue";
          var businessCode2 = "business_license";
          queryFile(businessId, businessCode2).then(response => {
            var dataFile = response.data;
            if (dataFile.length == 0) {
              this.$modal.msgError("请上传营业执照！");
            } else {
              queryFile(businessId, businessCode).then(response => {
                var dataFile = response.data;
                if (dataFile.length == 0) {
                  this.$modal.msgError("请上传企业logo！");
                } else {
                  updateDept(this.form).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.openAdmin = false;
                    this.getDeptInfo();
                    this.refreshKey++;
                  });
                }
              });
            }
          });
        }
      });
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.areaId,
        label: node.areaName,
        isDisabled: false,
        children: node.list && node.list.length > 0 ? node.list : 0,
      };
    },
    submitFormTwo() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          var businessId = this.$store.state.user.info.orgId;
          var businessCode = "enterprise_logo";
          var businessCode1 = "enterprisePictrue";
          var businessCode2 = "business_license";
          queryFile(businessId, businessCode2).then(response => {
            var dataFile = response.data;
            if (dataFile.length == 0) {
              this.$modal.msgError("请上传营业执照！");
            } else {
              queryFile(businessId, businessCode).then(response => {
                var dataFile = response.data;
                if (dataFile.length == 0) {
                  this.$modal.msgError("请上传企业logo！");
                } else {
                  this.$confirm(
                    "保存数据后，将会提交认证申请到平台，企业部分重要信息不能再修改，是否继续？",
                    "提示",
                    {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning",
                    }
                  ).then(() => {
                    this.form.isCertified = "1";
                    updateDept(this.form)
                      .then(response => {
                        this.openAdmin = false;
                        this.$alert("提交成功，等待系统管理员审核！", "消息", {
                          confirmButtonText: "确定",
                          callback: action => {
                            window.location.reload();
                            this.getDeptInfo();
                            this.refreshKey++;
                          },
                        });
                      })
                      .catch(() => {
                        this.$message({
                          type: "info",
                          message: "已取消保存",
                        });
                      });
                  });
                }
              });
            }
          });
        }
      });
    },
    submitFormOne() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          var businessId = this.$store.state.user.info.orgId;
          var businessCode = "enterprise_logo";
          var businessCode1 = "enterprisePictrue";
          var businessCode2 = "business_license";
          queryFile(businessId, businessCode2).then(response => {
            var dataFile = response.data;
            if (dataFile.length == 0) {
              this.$modal.msgError("请上传营业执照！");
            } else {
              queryFile(businessId, businessCode).then(response => {
                var dataFile = response.data;
                if (dataFile.length == 0) {
                  this.$modal.msgError("请上传企业logo！");
                } else {
                  this.$confirm(
                    "保存提交后不能再修改企业部分重要信息，是否继续？",
                    "提示",
                    {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning",
                    }
                  ).then(() => {
                    this.form.isCertified = "1";
                    updateDept(this.form)
                      .then(response => {
                        this.openAdmin = false;
                        this.$alert("认证成功，等待系统管理员审核！", "消息", {
                          confirmButtonText: "确定",
                          callback: action => {
                            window.location.reload();
                            this.getDeptInfo();
                            this.refreshKey++;
                          },
                        });
                      })
                      .catch(() => {
                        this.$message({
                          type: "info",
                          message: "已取消保存",
                        });
                      });
                  });
                }
              });
            }
          });
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        deptId: null,
        parentId: null,
        ancestors: null,
        deptName: null,
        type: "1",
        companyOrigin: null,
        abbreviate: null,
        registeredFund: null,
        legalPerson: null,
        companyType: "0",
        nature: null,
        creditCode: null,
        area: null,
        foundTime: null,
        businessScope: null,
        industry: null,
        contacts: null,
        address: null,
        orderNum: null,
        personalSignature: null,
        leader: null,
        phone: null,
        email: null,
        status: "0",
        fileId: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        isCertified: null,
        reviewComments: null,
        productDetail:null
      };
      this.resetForm("form");
    },
    startAutoPlay() {
      this.carouselInterval = setInterval(() => {
        this.next(); // 使用 next 方法代替直接操作 currentIndex
      }, this.intervalTime);
    },
    stopAutoPlay() {
      clearInterval(this.carouselInterval);
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.totalItems) % this.totalItems;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.totalItems;
    },
    handleUpdate() {
      this.reset();
      const deptId = this.$store.state.user.info.orgId;
      this.businessId = deptId;
      this.fileType = 1;
      this.fileType1 = 1;
      this.refreshKey++;
      getDept(deptId).then(response => {
        this.form = response.data;
        this.deptType = response.data.type;
        if (response.data.isCertified == "0") {
          this.deptLitle = "修改基本信息";
          this.fileType = 1;
          this.fileType1 = 1;
          this.disabledOne = false;
          this.disabledTwo = false;
        }
        if (response.data.isCertified == "1") {
          this.fileType = 2;
          this.fileType1 = 2;
          this.disabledOne = true;
          this.disabledTwo = true;
          this.deptLitle = "查看基本信息";
        }
        if (response.data.isCertified == "2") {
          this.fileType = 1;
          this.fileType1 = 1;
          this.disabledOne = true;
          this.disabledTwo = false;
          this.deptLitle = "修改基本信息";
        }
        if (response.data.isCertified == "3") {
          this.fileType = 1;
          this.fileType1 = 1;
          this.disabledOne = false;
          this.disabledTwo = false;
          this.deptLitle = "修改基本信息";
        }
      });
      this.openAdmin = true;
    },
    handleEdit() {
      this.$router.push('/system/dept/edit');
    },
    // 取消按钮
    cancel() {
      this.openAdmin = false;
      this.reset();
    }
  },

  beforeDestroy() {
    clearInterval(this.carouselInterval);
  }
};
</script>

<style scoped>
.header {
  position: relative;
  background-image: url('assets/images/js_topbg.jpg');
  background-size:100% 100%;
  color: white;
  text-align: center;
  min-height: 30vh;
}
.teacher-form-container {
  overflow-y: auto;
  overflow-x: auto;
  padding: 16px;
  max-width: 100%;
  max-height: 90vh;
  box-sizing: border-box;
}
.header-title{
  width: 100%;
  padding: .5% 4%;
  text-align: right;
  font-size: 22px;
}

.header-logo{
  position: absolute;
  width:100%;
  padding: 1% 4%;
  display: flex;
  justify-content: left;
  padding-top: 8vh;
}
.logo{
  display: flex;
  align-items: center;
  justify-content: center;
  width:160px;
  height:16.615vh;
  background-color: white;
  border: 3px solid #677A9B;
}
.logo img{
  height: 100%;
  background-size: cover;
}
.header-logo h1{
  text-align: left;
  padding-left: 32px;
  color: white;
  font-size: 38px;
  font-weight:600;
}

.section {
  padding: .5% 4%;
  font-size:18px;
}

.section p{
  text-align: left;
  text-indent: 2rem;
  margin-bottom: 8px;
}
.company-intro{
  margin-top: 6vh;
}

.contact-us ul {
  width: 100%;
  list-style-type: none;
  padding: 0;
}

.contact-us li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin:0;
  border-bottom: 1px solid #E6EBEE;
  padding: .5% 0;
}
.contact-us li div{
  width: 40%;
  text-align: left;
}

.title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4vh;
  position: relative;
}
.title-container::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 8px;
  z-index: 1;
  background-image: linear-gradient(to right, #F9FAFF, #C7D4F4);
}
.title {
  font-size: 16px;
  font-weight: bold;
  background-color: #073290;
  color: white;
  padding:.5vh 16px;
  margin: 0 0 -10px 0;
  z-index: 1000;
}

.more-options {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
}

.dot {
  width: 6px;
  height: 6px;
  background-color: #BFD0EE;
  border-radius: 50%;
  margin-left: 5px;
}

.dot:first-child {
  margin-left: 0;
}

.carousel-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-track {
  width: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-track .qualification-item {
  flex-shrink: 0;
  width: 20%; /* 根据数量动态计算宽度 */
  margin-right:1%; /* 可选间距 */
}
.carousel-track .qualification-item:last-child {
  margin-right: 0;
}

.carousel-track img {
  width: 100%;
  height: auto;
}

.qualification-item {
  text-align: left;
  width: 20%;
}
.qualification-item div{
  width: 100%;
  height: 27vh;
  background:  url('assets/images/js_imgbg.jpg') no-repeat;
  background-size: 100% 100%;
}
.qualification-item div img{
  text-align: left;
  width: 97.7%;
  height: 25.8vh;
  background-size: cover;
}
.qualification-item p{
  width: 100%;
  text-align: center;
  padding-top: 1vh;
}

.carousel-btn {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  opacity: 0.2;
  transition: opacity 0.3s ease;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  border: none;
  cursor: pointer;
  z-index: 2;
}
.carousel-btn:hover {
  opacity: .6;
}

.carousel-btn.prev {
  left: 2px;
}

.carousel-btn.next {
  right: 2px;
}

.edit-btn-container {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1000;
}
.icon{
   position: absolute;
 right: 4%;
 bottom: 30%;
}
.icon button{
border: none;
  width: 32px;
height: 32px;
 background: url('assets/images/edit.png') no-repeat;
 background-size: 100% 100%;
cursor: pointer;
}
.edit-btn-container .el-button {
  font-size: 12px;
  padding: 5px 10px;
}

</style>
